:root {
  /* -- 颜色 -- */
  --sonic-silver: hsl(0, 0%, 46%);
  --spanish-gray: hsl(0, 0%, 60%);
  --theme-color: hsl(10, 100%, 57%);
  --light-gray: hsl(0, 0%, 80%);
  --gray-x-11: hsl(0, 0%, 73%);
  --dim-gray: hsl(0, 0%, 44%);
  --cultured: hsl(0, 0%, 98%);
  --black_10: hsl(0, 0%, 0%, 0.1);
  --black_20: hsl(0, 0%, 0%, 0.2);
  --black_30: hsl(0, 0%, 0%, 0.3);
  --black_70: hsl(0, 0%, 0%, 0.7);
  --white_10: hsl(0, 0%, 100%, 0.1);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);

  /* -- 文字 -- */
  --fs-36: 3.6rem;
  --fs-32: 3.2rem;
  --fs-28: 2.8rem;
  --fs-24: 2.4rem;
  --fs-18: 1.8rem;
  --fs-14: 1.4rem;

  --fw-800: 800;
  --fw-700: 700;
  --fw-600: 600;
  --fw-500: 500;
  --fw-400: 400;

  /* -- 章节间距 -- */
  --section-padding: 8rem;

  /* -- 阴影 -- */

  /* -- 圆角 -- */
  --radius-10: 10px;
  --radius-8: 8px;

  /* -- 过渡 -- */
  --transition: 0.25s ease;
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

/* -- 初始化 -- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

address {
  font-style: normal;
}

.hidden {
  display: none;
  transition: var(--transition);
}

a,
img,
span,
input,
button,
textarea,
ion-icon {
  display: block;
}

img {
  height: auto;
}

input,
button,
textarea {
  background: none;
  border: none;
  font: inherit;
}

input,
textarea {
  width: 100%;
}

button {
  cursor: pointer;
}

ion-icon {
  pointer-events: none;
}

address {
  font-size: normal;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-y: overlay;
}

body {
  background-color: var(--white);
  color: var(--sonic-silver);
  font-family: system-ui, —apple-system, Segoe UI, Roboto, Emoji, Helvetica,
    Arial, sans-serif;
  font-size: 1.6rem;
  font-feature-settings: "tnum" on, "lnum" on, "case" on;
  line-height: 1.7;
}

:focus-visible {
  outline-offset: 0.4rem;
}

::placeholder {
  color: var(--dim-gray);
}

::-webkit-scrollbar {
  width: 1.2rem;
  height: 0.2rem;
}

body::-webkit-scrollbar-track {
  background-color: var(--white);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--spanish-gray);
  border: 0.3rem solid var(--white);
  border-radius: 5rem;
}

/* -- 复用元素 -- */
.container {
  padding-inline: 3.2rem;
}

.section {
  padding-block: var(--section-padding);
}

.img-holder {
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--light-gray);
  overflow: hidden;
}

.has-before {
  position: relative;
  z-index: 1;
}

.has-before::before {
  position: absolute;
  content: "";
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-subtitle {
  color: var(--theme-color);
  font-weight: 600;
  margin-block-end: 0.4rem;
}

.h1,
.h2,
.h3 {
  color: var(--black);
}

.h1 {
  font-size: var(--fs-32);
}

.h1,
.h2 {
  font-weight: var(--fw-700);
  text-transform: uppercase;
}

.h2 {
  font-size: var(--fs-24);
  line-height: 1.2;
}

.h1,
.h3 {
  line-height: 1.4;
}

.h3 {
  font-size: var(--fs-18);
}

.section-title {
  margin-block-end: 4rem;
}

:is(.portfolio, .news) .section-title {
  margin-block-end: 6rem;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-10);
  cursor: pointer;
}

.card-content {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  left: 1.2rem;
  background-color: var(--white);
  border-radius: var(--radius-8);
  padding: 2rem 2.4rem;
  display: grid;
  align-content: flex-end;
  opacity: 0;
  transition: var(--transition);
}

.card:is(:hover) .card-content {
  opacity: 1;
}

.card-content > ion-icon {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--black);
  font-size: 4rem;
  transform: rotate(-45deg);
}

.has-scrollbar {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  padding-block-end: 3.2rem;
  margin-block-end: -1.6rem;
  scroll-snap-type: inline mandatory;
}

.scrollbar-item {
  min-width: 100%;
  scroll-snap-align: start;
}

.has-scrollbar::-webkit-scrollbar-track {
  background-color: var(--black_20);
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--black_70);
}

.has-scrollbar::-webkit-scrollbar-button {
  width: calc(25% -2.4rem);
}

/* -- 😺 HEADER -- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  padding-block: 1.6rem;
  border-block-end: 0.1rem solid var(--black_10);
  z-index: 4;
}

.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4.8rem;
}

.logo {
  color: var(--black);
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 800;
}

.nav-toggle-btn .line {
  width: 3rem;
  height: 0.4rem;
  background-color: var(--black);
  transition: var(--transition);
}

.nav-toggle-btn .line:not(:last-child) {
  margin-block-end: 0.8rem;
}

.nav-toggle-btn.active .line-1 {
  transform: translateY(1.2rem) rotate(45deg);
}

.nav-toggle-btn.active .line-2 {
  transform: translateX(-100%);
  opacity: 0;
}

.nav-toggle-btn.active .line-3 {
  transform: translateY(-1.2rem) rotate(-45deg);
}

.navbar {
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 0;
  width: 100%;
  background-color: var(--white);
  padding-inline: 3.2rem;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: 0.3s var(--cubic-out);
}

.navbar.active {
  max-height: 24rem;
  visibility: visible;
  transition-duration: 0.5s;
}

.navbar-list {
  margin-block: 2.4rem;
}

.navbar-link {
  color: var(--black);
  font-weight: var(--fw-600);
}

/* -- 😎 HERO -- */

.slide-down-btn {
  display: none;
}

.hero {
  background-color: var(--cultured);
  padding-block-start: calc(var(--section-padding) + 2rem);
}

.hero-banner {
  margin-block-end: 6rem;
  max-height: 50rem;
  border-radius: var(--radius-10);
  margin-inline: auto;
}

.hero-title {
  margin-block: 1.2rem 2rem;
}

.hero-list {
  margin-block-end: 2.4rem;
}

.hero-list .list-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.2rem;
  color: var(--black);
  font-size: var(--fs-18);
  padding-block: 0.4rem;
}

.hero-list .list-link:is(:hover, :focus) {
  color: var(--theme-color);
}

.hero-list .list-link .span,
.hero-list .list-link ion-icon {
  transition: var(--transition);
}

.hero-list .list-link:is(:hover, :focus) ion-icon {
  transform: rotate(-45deg);
}

.exp-list .list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.6rem;
  line-height: 1.5;
}

.exp-list .list-item:not(:last-child) {
  margin-block-end: 1.6rem;
}

.exp-list .strong {
  color: var(--black);
  font-size: var(--fs-36);
  font-weight: var(--fw-700);
}

.exp-list .span {
  font-size: var(--fs-12);
}

/* -- 🍳 SKILLS -- */

.skills-banner {
  display: none;
}

.skills {
  background-color: var(--black);
}

.skills .section-title {
  color: var(--white);
}

.skills .section-text {
  color: var(--gray-x-11);
  margin-block: 4rem 4.4rem;
}

.skills-item:not(:last-child) {
  margin-block-end: 2.4rem;
}

.skills-list .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
  margin-block-end: 0.8rem;
}

.skill-title {
  font-size: unset;
  font-weight: unset;
}

.skills .progress-box {
  background-color: var(--white_10);
}

.skills .progress {
  background-color: var(--theme-color);
  height: 0.8rem;
}

/* -- ⏱ TIMELINE -- */
.timeline-item {
  padding-block: 2rem;
  font-size: var(--fs-18);
  display: grid;
  gap: 1.6rem;
}

.timeline-item:not(last-child) {
  border-block-end: 0.1rem solid var(--black_10);
}

.timeline-item .item-period {
  font: unset;
}

.timeline-item .item-company {
  color: var(--black);
}

/* -- 📇 CONTACT -- */
.contact {
  background-color: var(--cultured);
}

.contact-list {
  margin-block: 4rem 4.8rem;
}

.contact-item:not(:last-child) {
  margin-block-end: 2.4rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.contact-item ion-icon {
  color: var(--theme-color);
  font-size: 2.4rem;
  flex-shrink: 0;
}

.contact-link {
  color: var(--black);
}

.social-item:not(:last-child) {
  margin-block-end: 3.2rem;
}

/* -- 🦶 FOOTER -- -- */
.footer {
  background-color: var(--black);
  color: var(--white);
  text-align: center;
  padding-block: 3.2rem;
}

.copyright {
  margin-block-end: 1.2rem;
}

.copyright-link {
  display: inline-block;
}

.copyright-link:is(:hover, :focus) {
  text-decoration: underline;
}

.social-media-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-media-link {
  font-size: var(--fs-18);
}

/* -- 🎆 PORTOFOLIO MODAL -- */
.overlay {
  position: fixed;
  top: 0;
  left: 0%;
  height: 100%;
  width: 100%;
  background-color: var(--black);
  z-index: 8;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.modal {
  /* position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  height: 80%;
  overflow: auto;
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition); */
  position: fixed;
  left: 0;
  top: 20rem;
  right: 0;
  bottom: 0;
  width: 80%;
  left: 50%;
  transform: translate(-50%);
  display: grid;
  justify-items: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  z-index: 12;
  transition: var(--transition);
}
.show {
  display: flex;
  flex-direction: column;
}
.portfolio-show {
  top: 0%;
  width: 100%;
}

/* -- 🖥 MEDIA QUERIES -- */

/* responsive for larger than 576px screen */

@media (min-width: 576px) {
  /* REUSED STYLE */
  .scrollbar-item {
    min-width: calc(50% - 2rem);
  }

  /* HERO */
  .exp-list {
    display: flex;
    justify-content: flex-start;
    gap: 4.8rem;
  }

  .exp-list .list-item:not(:last-child) {
    margin-block-end: 0;
  }
}

/* responsive for larger than 768px screen */
@media (min-width: 768px) {
  /* CUSTOM PROPERTY */

  :root {
    /* TYPOGRAPHY  */
    --fs-32: 3.6rem;
    --fs-24: 3.2rem;
  }

  /* REUSED STYLE */
  .h3 {
    --fs-18: 2rem;
  }

  .card-content {
    padding: 3.2rem 3.6rem;
  }

  .card-content > ion icon {
    top: 3.2rem;
    right: 3.2rem;
  }

  /* REUSED STYLE */
  .timeline-item {
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
  }

  /* FOOTER */
  .footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .copyright {
    margin-block-end: 0;
  }
}

/* responsive for larger than 992px screen */
@media (min-width: 992px) {
  /* CUSTOM PROPERTY */

  :root {
    /* TYPOGRAPHY */
    --fs-36: 4.4rem;

    /* SPACING */
    --section-padding: 12rem;
  }

  /* REUSED STYLE */

  .container {
    padding-inline: 4.8rem;
  }

  /* HEADER */
  .header {
    background-color: transparent;
    border-block-end: none;
    padding-block: 2.4rem;
    transition: var(--transition);
  }

  .header.active {
    background-color: var(--white);
    padding-block: 2rem;
  }

  .navbar,
  .navbar.active {
    all: unset;
    margin-inline-start: auto;
    transition: var(--transition);
  }

  .navbar {
    visibility: hidden;
  }

  .navbar.active {
    visibility: visible;
  }

  .navbar-list {
    display: flex;
    gap: 2rem;
    margin-block: 0;
  }

  .navbar-link {
    opacity: 0;
    transform: translateX(2rem);
    font-weight: var(--fw-400);
    transition: var(--transition);
  }

  .navbar.active .navbar-link {
    opacity: 1;
    transform: translateX(0);
  }

  .navbar-link:is(:hover, :focus) {
    color: var(--theme-color);
  }

  /* HERO */
  .hero {
    --section-padding: 7.2rem;
    padding-block-start: calc(var(--section-padding) + 6rem);
    min-height: 100vh;
    display: grid;
    align-items: center;
  }

  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 16rem;
  }

  .hero-banner {
    order: 1;
    width: 24.8rem;
    margin-inline: auto 8rem;
    margin-block-end: 0;
    overflow: visible;
    transform: rotate(7deg);
  }

  .hero-banner .img-cover {
    border-radius: inherit;
  }

  .hero-banner::before {
    bottom: -4rem;
    left: -9.6rem;
    width: 90%;
    height: 100%;
    background-color: var(--theme-color);
    z-index: -1;
    transform: rotate(-15deg);
    border-radius: var(--radius-10);
  }

  .exp-list .span {
    --fs-12: 1.4rem;
  }

  .slide-down-btn {
    display: block;
    color: var(--black);
    font-size: 4rem;
    max-width: max-content;
    margin-block-start: 4rem;
    transition: var(--transition);
    animation: scrollDown 2s ease infinite;
  }

  .slide-down-btn:is(hover, :focus) {
    color: var(--theme-color);
  }

  @keyframes scrollDown {
    0% {
      transform: translateY(0);
    }

    32% {
      transform: translateY(2rem);
    }
  }

  /* -- SKILLS -- */
  .skills .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16rem;
  }

  .skills-banner {
    display: block;
    position: absolute;
    top: 0;
    right: 4.8rem;
    width: 40rem;
    height: 64rem;
    background-image: url("../images/skills-bg.webp");
    background-repeat: norepeat;
    background-size: cover;
    background-position: 40rem;
    background-attachment: fixed;
    overflow: hidden;
  }

  /* -- TIMELINE -- */

  .timeline-item {
    padding-block: 3.2rem;
  }

  /* --  CONTACT -- */
  .contact .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 16rem;
  }

  .contact-list {
    margin-block-end: 0;
  }

  .contact-banner {
    background: url(../images/contact-banner.webp);
    background-size: cover;
    height: 29rem;
    mix-blend-mode: color-burn;
  }
}

/* responsive for larger than 1200px screen */
@media (min-width: 1200px) {
  /* --  REUSED STYLE -- */
  .container {
    max-width: 120rem;
    width: 100%;
    margin-inline: auto;
  }

  .has-scrollbar {
    gap: 4rem;
  }

  .scrollbar-item {
    min-width: calc(33.33% - 2.66rem);
  }

  :is(.portfolio) .section-title {
    margin-block-end: 8rem;
  }

  /* --  HEADER -- */
  .header .container {
    max-width: unset;
  }

  /* --  HERO -- */
  .hero-banner {
    width: 32rem;
  }
}
